import React, { useEffect, useState } from 'react'
import './style.scss'
import { useLocation, useNavigate, useDispatch } from 'umi'
import HeaderItemList from './components/HeaderItemList'
import ItemsNav from './components/ItemsNav'
import { fetchItems } from '@a/index'
import Icon from '@/components/Icon'
export default function index() {
  const location = useLocation()
  const navigate = useNavigate()
  //获取指定商品分类下的商品列表
  const [items, setItems] = useState<any[]>([])
  const fetchItemsed = (params = {}) => {
    fetchItems(params).then(res => {
      if (res.data.code === 0) {
        setItems(res.data.data.result)
      }
      if (res.data.code === 700) {
        setItems([])
      }
    })
  }
  //获取指定商品分类下的商品列表

  
  //初始化发送请求获取指定分类下的数据
  useEffect(() => {
    fetchItemsed({ categoryId: location.state.id, orderBy: 'priceDown'})
  }, [])
  //初始化发送请求获取指定分类下的数据

  //排序的商品列表的请求接口
  
  //排序列的数据
  const [sortNum, setSortNum] = useState(1) 
  const addItemActive = (num: number) => {
    console.log(num);
    setSortNum(num)
    let orderBy = 'priceDown' // 默认是降序

    switch (num) {
      case 1:
        orderBy = 'ordersDown' //销量降序
        break;
      case 2:
        orderBy = 'priceDown' //点击价格时默认是价格降序
        break;
      case 3:
        orderBy = 'addedDown' //发布时间升序 新品
        break;
      case 4:
        orderBy = 'priceUp ' //点击向上的箭头  价格升序
        break;
      case 5:
        orderBy = 'priceDown' //价格降序 点击向下的箭头 
        break;
      default:
        break;
    }

    fetchItemsed({orderBy,categoryId: location.state.id})
  }
  //排序列的数据
const dispatch = useDispatch()
  //添加购物车
 const addShopping = (id:number) => {
dispatch({
  type: 'count/addCate',
  data: {
    goodsId: id,
    number: 1
  }
})
 }
  //添加购物车
  return (
    <div className='Item_content'>
      <HeaderItemList name={location.state.name}/>
      <div className="itemLists_content">

        {/* 排序栏 */}
        <div className="order-bar">

          <div
            className={`list sortItems ${sortNum === 1 && `active`}`} >
            <span
              onClick={() => {
                addItemActive(1)
              }}>销量</span>
          </div>

          <div className= {`list priceItems ${(sortNum === 2 || sortNum ===4 || sortNum === 5)&& `active`}`}>
            <span
              onClick={() => {
                addItemActive(2)
              }}
              className='priceItem'>价格</span>
            <div
              onClick={() => {
                addItemActive(4)
              }}
              className={`triangle up ${sortNum === 4 && `active`}`}></div>
            <div
              onClick={() => {
                addItemActive(5)
              }
              }

              className={`triangle down ${(sortNum === 5 || sortNum === 2) && `active`}`}></div>

          </div>

          <div className= {`list sortItems ${sortNum === 3 && `active`}`}>
            <span
              onClick={() => {
                addItemActive(3)
              }}
            >新品</span>
          </div>
        </div>
        {/* 排序栏 */}

          {/* 商品列表 */}
          {
            items.length ===0 
            &&
            <>
            <h2 style={{textAlign:'center'}}>暂无商品</h2>
            </>
          }
          {items.map(item => {
            return (
              <div className='itemLists_nav' key={item.id} 
              onClick = {
                () => {
                  navigate('/detail', {
                    state: {
                      id: item.id
                    }
                  })
                }
              }>
              <img src={item.pic} alt="" />
              <div className='priceNav'>
<p>{item.name}</p>
<div className='icon_price'>
<span>${item.minPrice}</span>
<Icon name = '&#xe61b;' 
          size={25} 
          color='red' 
          stop = {true}
          onClick={
            () => {
              // 添加购物车
              addShopping(item.id)
            }
           
          }/>
</div>
              </div>
            </div>
            )
           
          })}
              
          {/* 商品列表 */}
      </div>

    </div>
  )
}
